<template>

		
	<view class="content">
			<scroll-view scroll-y="true" >
		<view class="bg-container">
			<view class="bg-board">
				<image mode="widthFix" class="bg-board-img" src="../../static/images/common/moon_star.png" />
			</view>
			<view class="bg-shade">
				<image class="bg-shade-img" src="../../static/images/common/union.png" />
			</view>
			<view class="hd-title-board">
				<view class="hd-title">睡前故事</view>
				<view class="hd-desc">帮助你进入深度自然睡眠。</view>
			</view>
			<view class="navbar-board">
				<view class="navbar-item" @click="toggleNavbar(i)" v-for="(item,i) in navbar" :key='i'>
					<view class="nav-icon " :class="item.active?'active':''">
						<image :src="item.url"></image>
					</view>
					<view class="nav-title" :class="item.active?'active':''">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="center-topic-board" v-if="toggleType"  @click="listClick(music_center)">
				<view class="topic-img">
					<image :src="music_center.url" />
				</view>
				<view class="topic-title item">{{music_center.title}}</view>
				<view class="topic-desc item">{{music_center.desc}}</view>
				<view class="topic-btn item">
					<image src="../../static/images/common/start.png" />
				</view>
			</view>
			<view class="list_box">
			<view class="list-item" @click="listClick(item)" :key='i' v-for="(item,i) in music_topic">
				<view class="list-img">
					<image mode="aspectFill" :src="item.coverImgUrl" />
				</view>
				<view class="list-title ellipsis">{{item.title}}</view>
				<view class="list-desc multi-ellipsis">{{item.desc}}</view>
			</view>
			</view>
		</view>

		</scroll-view>
		
		

		<view class="tabBar-board">
		  <view class="tabBar-item" >
		    <view class="icon-board active">
		      <image class="icon" mode="aspectFit" :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"/>
		    </view>
		  </view>
		  <view class="tabBar-item">
		    <view class="icon-board" @click="NavChange">
		      <image class="icon" mode="aspectFit" 
		        :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"/>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import { asyncForEach } from '../../utils/utils.js';
	import {music_topic,music_center,story_topic} from '../../config/topic.js'
	export default {
		data() {
			return {
				PageCur: 'basics',
				music_center:{},
				music_topic:{},
				navbar:[
					{title: '音乐',url: require('@/static/images/common/music.png'),active:true},
					{title: '故事',url: require('@/static/images/common/story.png'),active:false},
					// {title: '影视',url: require('@/static/images/common/music.png'),active:false},
				],
				toggleType:true,
				topic:''
			}
		},
		onLoad() {
			this.music_center=music_center;
			this.music_topic=music_topic;
			
			this.topic=this.$store.state
		},

		methods: {
			listClick(item){
				// console.log(item);
				// uni.navigateTo({
				// 	url:'../typeList/typeList?item='+JSON.stringify(item)
				// })
				
				const { field } = item;
				console.log(item);
				    // 提交数据
				    this.$store.commit('changeState', {
				      type: field
				    });
				uni.navigateTo({
					url:'../typeList/typeList'
				})
			},
			
			toggleNavbar(index){
				this.navbar.forEach((v,i)=>{
					index===i?v.active=true:v.active=false
				})
				switch (index){
					
					case 1:
					uni.showToast({
						icon:'none',
					    title: '努力开发中...',
					    duration: 1000
					});
						break;
					
					// case 2:
					
					// 	uni.navigateTo({
					// 		url:'../movie/index'
					// 	})
					// 	console.log(11);
					// 	break;
					default:
						
						break;
				}
	// 			this.toggleType=!this.toggleType;
	
	// 			if(this.toggleType){
	// 				this.music_topic=music_topic
	// 				this.$store.commit('changeState', {
	// 				      topic: 'music'
	// 				 });
	// 			}else{
	// 				this.music_topic=story_topic;
	// 				this.$store.commit('changeState', {
	// 				      topic: 'story'
	// 				 });
					 
	// 				 //获取睡前故事数据
	// 				 // this.crawlerStoriesData();
					 
					
	// 			}
				
				
			},
			  /**
			   * @description 爬取故事数据
			   * @returns {void}
			   */
			  crawlerStoriesData () {
			    return asyncForEach(story_topic, async (topic, index, next) => {
					console.log(topic['field']);
			      await uniCloud.callFunction({
			      	name:'story',
					data:{
						field: topic['field']
					}
			      }) 
			      console.log(`${topic['title']} 抓取完毕.`);
			      next();
			    });
			  },
			
			NavChange(e) {
				uni.navigateTo({
					url:'../mine/mine'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.content {
	
		.bg-container {
			padding-bottom: 160rpx;
			box-sizing: border-box;
			z-index: -1;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
			background-color: #03174c;
		

			.bg-board {
				position: absolute;
				z-index: 2;
				top: 50rpx;
				left: 25rpx;
				width: 700rpx;
				height: 250rpx;
			}
		
			.bg-shade {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 550rpx;
			}
		
		
		
			.hd-title-board {
				position: relative;
				z-index: 100;
				margin-top: 205rpx;
				margin-left: 138rpx;
				width: 552rpx;
				height: 230rpx;
		
				.hd-title {
					font-size: 48rpx;
					color: #e6e7f2;
				}
		
				.hd-desc {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #98a1bd;
				}
			}
		
		
			.center-topic-board {
				position: relative;
				z-index: 100;
				width: 690rpx;
				height: 466rpx;
				margin: 30rpx;
				border-radius: 25rpx;
				overflow: hidden;
			}
		
			.center-topic-board .item {
				position: absolute;
				z-index: 2;
			}
		
			.center-topic-board .topic-img {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 100%;
			}
		
			.center-topic-board .topic-title {
				top: 120rpx;
				width: 100%;
				text-align: center;
				font-size: 43rpx;
				color: #ffe7bf;
			}
		
			.center-topic-board .topic-desc {
				top: 220rpx;
				left: calc(50% - 200rpx);
				width: 400rpx;
				text-align: center;
				font-size: 30rpx;
				color: #f9f9ff;
			}
		
			.center-topic-board .topic-btn {
				top: 350rpx;
				left: calc(50% - 70rpx);
				width: 140rpx;
				height: 70rpx;
			}
			
			.list_box{
				display: flex;
				align-items: flex-start;
				flex-flow: row wrap;
				box-sizing: border-box;
				padding-right: 30rpx;
				
				.list-item {
					flex: 0 0 50%;
					width: 320rpx;
					margin-top: 40rpx;
					padding-left: 30rpx;
					
				
					.list-img {
						width: 100%;
						height: 244rpx;
						border-radius: 15rpx;
						overflow: hidden;
					}
					.list-title {
						margin-top: 20rpx;
						font-size: 34rpx;
						color: #e6e7f2;
					}
					.list-desc {
						margin-top: 15rpx;
						font-size: 28rpx;
						color: #98a1bd;
					}
				}
				
			}
			
		
		
		
		
		
			.navbar-board {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 224rpx;
				.navbar-item {
					width: 130rpx;
					height: 100%;
					margin-left: 40rpx;
					
				}
				.navbar-item .nav-icon {
					width: 100%;
					height: 130rpx;
					border-radius: 50rpx;
					background-color: #586894;
				}
				.navbar-item .nav-icon image {
					width: 50rpx;
					height: 50rpx;
					margin: 40rpx;
				}
				.navbar-item .nav-icon.active {
					background-color: #8E97FD;
				}
				.navbar-item .nav-title {
					width: 100%;
					margin-top: 20rpx;
					text-align: center;
					font-size: 32rpx;
					color: #98A1BD;
				}
				.navbar-item .nav-title.active {
					color: #E6E7F2;
				}
			}
		
			
		}
	}

	

</style>
